<template>
  <div style="padding:50px;">
    <!-- 三级联动 -->
    <!-- 分公司 -->
    <el-select v-model="value1" placeholder="请选择分公司" @change="showMessage($event)" v-if="showfeng">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>

    <!-- 部门 -->
    <el-select
      :disabled="sanji1"
      v-model="value2"
      collapse-tags
      style="margin-left: 20px;"
      placeholder="请选择部门"
      @change="showMessage1($event)"
      v-if="showbumen"
    >
      <el-option v-for="item in optionsbumen" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>

    <!-- 人员 -->
    <el-select
      :disabled="sanji2"
      change
      v-model="value3"
      collapse-tags
      style="margin-left: 20px;"
      placeholder="请选择人员"
      @change="showMessage2($event)"
      v-if="showrenyuan"
    >
      <el-option v-for="item in optionsrenyuan" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>

    <!--  搜索按钮-->
    <el-button
      type="primary"
      icon="el-icon-search"
      @click.native="searchbutton()"
      :disabled="sanji2"
    >搜索</el-button>
    <!-- v-if="shouyedayin==1"  -->
    <div style="width:100;margin-top:40px">
      <div class="block" style="display:flex;justify-content:space-between">
        <div class="demonstration">
          <el-button @click="print" type="primary" size="mini" style="margin:30px auto;">打印</el-button>
          <el-button type="primary" size="mini" style="margin:30px auto;">导出</el-button>
          <el-button type="primary" size="mini" style="margin:30px auto;">历史数据</el-button>
        </div>
        <div class="demonstration;" style="align:right">{{ nowdata }}</div>
      </div>

      <!-- <div v-if="shouyedayin==2" class="block" style="display:flex;justify-content:space-between">
      <div class="demonstration">
        <el-button @click="print1" type="primary" size="mini" style="margin:30px auto;">打印</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">导出</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">历史数据</el-button>
      </div>
      <div class="demonstration;" style="align:right">{{nowdata}}</div>
      </div>

       <div v-if="shouyedayin==3" class="block" style="display:flex;justify-content:space-between">
      <div class="demonstration">
        <el-button @click="print2" type="primary" size="mini" style="margin:30px auto;">打印</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">导出</el-button>
        <el-button type="primary" size="mini" style="margin:30px auto;">历史数据</el-button>
      </div>
      <div class="demonstration;" style="align:right">{{nowdata}}</div>
      </div>-->
    </div>

    <!-- 这是默认选择全部列表内容  -->
    <div v-if="shifouxianshizhuye">
      <!-- <h1 align="center">XXXX年X月项目操作部门汇总管理</h1>
      <h2 align="center">全部 各分公司</h2>-->
      <el-table ref="print" :data="liebiao" border style="width: 100% ; :align ">
        <!-- <el-table-column prop="index" label="序号" width="180"></el-table-column> -->
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="proType" label="项目类型" width="180"></el-table-column>
        <el-table-column prop="count" label="项目数量"></el-table-column>
        <el-table-column prop="sum" label="项目金额"></el-table-column>
        <el-table-column prop="per3" label="合同占比%"></el-table-column>
        <el-table-column prop="count1" label="完成数量"></el-table-column>
        <el-table-column prop="per1" label="完成占比%"></el-table-column>
        <el-table-column prop="count2" label="未完成数量"></el-table-column>
        <el-table-column prop="per2" label="未完成占比%"></el-table-column>
        <!-- <el-table-column align="center" label="状态" prop="isFinishName">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="ontap(scope.$index+1, scope.row)"
            >{{scope.row.isFinishName}}</el-button>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作" width="200px">
          <template v-if="noprint" slot-scope="scope">
            <el-button align="center" size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
            <el-button @click="taskbook(scope.row)"  align="center" size="mini">项目任务书</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
    </div>

    <!-- 部门汇总列表 -->
    <div v-if="shifouxianshibumen">
      <!-- <h1 align="center">XXXX年X月项目操作部门汇总管理</h1>
      <h2 align="center">全部 各部门</h2>-->
      <el-table ref="print1" :data="tablebumen" border style="width: 100% ; :align ">
        <!-- <el-table-column prop="index" label="序号" width="180"></el-table-column> -->
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="pro_type" label="项目类型" width="180"></el-table-column>
        <el-table-column prop="count" label="项目数量"></el-table-column>
        <el-table-column prop="sum" label="项目金额"></el-table-column>
        <el-table-column prop="per3" label="合同占比%"></el-table-column>
        <el-table-column prop="count1" label="完成数量"></el-table-column>
        <el-table-column prop="per1" label="完成占比%"></el-table-column>
        <el-table-column prop="count2" label="未完成数量"></el-table-column>
        <el-table-column prop="per2" label="未完成占比%"></el-table-column>
        <el-table-column align="center" label="状态" prop="isFinishName">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="ontap(scope.$index+1, scope.row)"
            >{{scope.row.isFinishName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template v-if="noprint" slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            <el-button @click="taskbook(scope.row)"  size="small">项目任务书</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
    </div>

    <div v-if="shifouxianshirenyuan">
      <!-- 人员汇总列表 -->
      <el-table ref="print2" :data="tablerenyuan" border style="width: 100% ;">
        <!-- <el-table-column prop="item.index" label="序号" width="180"></el-table-column> -->
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="pro_type" label="项目类型" width="180"></el-table-column>
        <el-table-column prop="count" label="项目数量"></el-table-column>
        <el-table-column prop="sum" label="项目金额"></el-table-column>
        <el-table-column prop="per3" label="合同占比%"></el-table-column>
        <el-table-column prop="count1" label="完成数量"></el-table-column>
        <el-table-column prop="per1" label="完成占比%"></el-table-column>
        <el-table-column prop="count2" label="未完成数量"></el-table-column>
        <el-table-column prop="per2" label="未完成占比%"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="100">
          <el-table-column align="center" label="状态" prop="isFinishName">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="ontap(scope.$index+1, scope.row)"
              >{{scope.row.isFinishName}}</el-button>
            </template>
          </el-table-column> -->
          <template v-if="noprint" slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
            <el-button @click="taskbook(scope.row)"  size="small">项目任务书</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
    </div>

    <!-- 我是编辑的表单页面 dialogFormVisible-->
    <!-- :rules="rules" -->
    <el-dialog title="详情信息列表" :visible.sync="xiangqingxianshi">
      <el-form :model="ruleForm" ref="ruleForm1">
        <el-form-item label="项目类型" prop="proType" width:180px>
          <el-input v-model="ruleForm.proType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目数量" prop="count" width:180px>
          <el-input v-model="ruleForm.count" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="完成数量" prop="count1" width:180px>
          <el-input v-model="ruleForm.count1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="未完成数量" prop="count2" width:180px>
          <el-input v-model="ruleForm.count2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="完成占比" prop="per1" width:180px>
          <el-input v-model="ruleForm.per1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="未完成占比" prop="per2" width:180px>
          <el-input v-model="ruleForm.per2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同占比" prop="per3" width:180px>
          <el-input v-model="ruleForm.per3" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<!-- 引入组件库 -->

<script>
import { hqfgs } from "@/api/zuzhijiagou";
import { getToken, gettype, getid } from "@/utils/auth";
import request from "@/utils/request";
import axios from "axios";
import { ymd, ym } from "@/api/date";
export default {
  name: "DragTable",

  data() {
    return {
      noprint: true,
      shouyedayin: 1,
      // bumendayin: false,
      // renyuandayin: false,

      //dayinziduan

      // 详情显示
      xiangqingxianshi: false,

      // 详情列表为空
      ruleForm: [],

      list: null,
      queryInfo: [
        {
          id: getid(),
          pageIndex: 1,
          pageSize: 20,
          tokens: getToken()
        }
      ],
      liebiao: [],
      loading: false,

      page: 1,
      pageSize: 10,
      total: 1,
      nowdata: ymd(),

      // 3级联动
      options: [],
      optionsbumen: [],
      optionsrenyuan: [],
      value1: [],
      value2: [],
      value3: [],
      sanji1: true,
      sanji2: true,
      // 联动权限
      // 用户等级
      itemlevel: "",

      // 用户分公司
      itembid: "",

      // 用户部门
      itempid: "",
      //

      //控制上面分公司部门人员搜索现实
      showfeng: true,
      showbumen: true,
      showrenyuan: true,

      // 搜索部门和人员的区别
      isbumen: true,

      // 是否现实成员
      shifouxianshibumen: false,
      shifouxianshirenyuan: false,
      shifouxianshizhuye: true,

      // 部门操作数据
      tablebumen: [],
      // 人员操作数据
      tablerenyuan: []

      //
    };
  },
  created() {
    // var id = getid();
    // this.pm.cid = id;
    // 判断用户等级
    this.findlevel();

    //  获取默认全部信息
    this.findList();
    // 等级为4的时候执行
    // this.fenggongsi();
  },
  methods: {
    taskbook(row){
      console.log(row)
      this.$router.push({
      path: 'xiangmugunali-taskbook',
      query: {}
      });
    },
    ontap(index, row) {
      console.log(index, row.id);
      var path, q;
      if (row.isFinish == 0) {
        //未完成
        path = "firstDraft";
      } else if (row.isFinish == 1) {
        //初稿
        path = "firstCheck";
      } else if (row.isFinish == 2) {
        //一审
        path = "secondCheck";
      } else if (row.isFinish == 3) {
        //二审
        path = "endDraft";
      } else if (row.isFinish == 4) {
        //终稿
        path = "finish";
      } else if (row.isFinish == 5) {
        //完成
        return;
      }
      if (row.id) {
        this.$router.push({
          path: path,
          query: { id: row.id }
        });
      }
    },
    // 点击详情
    handleEdit(index, row) {
      console.log(index, row);
      // console.log(row.id);
      // console.log(typeof row.id);
      console.log(row);
      this.ruleForm = row;
      //  this.dialogTitle = "编辑合同";
      this.xiangqingxianshi = true;
      // this.findDetail(row.id);
    },
    findDetail(id) {
      let self = this;
      request("/item/find/" + id, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: ""
      }).then(function(response) {
        // let res = response.data.object;
        console.log("根据id 查询的数据");
        console.log(response);
        // self.xiangqingxianshi = true;
        // self.ruleForm = res;
      });
    },

    print() {
      if (this.shouyedayin == 1) {
        this.noprint = false;
        this.w = this.wp;
        setTimeout(() => {
          this.$print(this.$refs.print);
        }, 500);
        setTimeout(() => {
          this.noprint = true;
          this.w = this.wf;
        }, 1500);
      }
      if (this.shouyedayin == 2) {
        this.noprint = false;
        this.w = this.wp;
        setTimeout(() => {
          this.$print(this.$refs.print1);
        }, 500);
        setTimeout(() => {
          this.noprint = true;
          this.w = this.wf;
        }, 1500);
      }
      if (this.shouyedayin == 3) {
        this.noprint = false;
        this.w = this.wp;
        setTimeout(() => {
          this.$print(this.$refs.print2);
        }, 500);
        setTimeout(() => {
          this.noprint = true;
          this.w = this.wf;
        }, 1500);
      }
    },
    // 判断等级
    findlevel() {
      request(`person/rolelist`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
          // token: getToken()
        },
        params: {
          tokens: getToken()
        }
      })
        .then(res => {
          console.log("徐宁大帅比");
          console.log(res);
          // this.$message.success("查询成功");
          // console.log(res.data.data.object);
          //  console.log(res.data);
          console.log("这是等级接口返回的 等级");
          this.itemlevel = res.data.object.level;

          console.log("这是等级接口返回的 分公司名字");
          this.itembid = res.data.object.bid;

          console.log("这是等级接口返回的 部门");
          this.itempid = res.data.object.pid;

          //  console.log("这是等级接口返回的 分公司名字");
          // this.itembranchname = res.data.object.branchname;

          //   this.total = res.data

          console.log(this.itemlevel);
          if (this.itemlevel == 4) {
            this.fenggongsi();
            this.showfeng = true;
            this.showbumen = true;
            this.showrenyuan = true;
            this.showsousuo = true;
          }
          if (this.itemlevel == 3) {
            this.showfeng = false;
            this.showbumen = true;
            this.showrenyuan = true;
            this.showsousuo = true;
            this.sanji1 = false;
            this.sanji2 = false;
            var fgs = this.itembid;
            console.log(
              "徐宁  记住 这是 等级3 下面的 获取默认的的分公司 进行部门请求的参数 bid "
            );
            console.log(fgs);
            //  缺一个部门的参数
            this.showMessage(fgs);

            this.searchbutton(fgs);
            this.shifouxianshizhuye = false;
            this.shifouxianshibumen = true;
            // 默认调用改账户的下的部门列表
            var bumenid = fgs;
            request(`/item/selectItemOptSum`, {
              method: "get",
              headers: {
                "Content-Type": "application/json",
                token: getToken(),
                params: bumenid
              }
            })
              .then(res => {
                console.log("奥利给  默认部门等级用户接口的数据");
                console.log(res);
                console.log(res.data.object);

                //  徐宁部门操作的接口数据;
                this.tablebumen = res.data.object;
                // this.sanji1 = false;
                //   this.total = res.data
                console.log(this.tablebumen);
              })
              .catch(e => {
                console.log(e);
                this.$message.success("查询失败");
              });
          }
          if (this.itemlevel == 2) {
            this.showfeng = false;
            this.showbumen = false;
            this.showrenyuan = true;
            this.showsousuo = true;
            console.log(
              "徐宁  记住 这是 等级3 下面的 获取默认的的分公司 进行部门请求的参数 bid "
            );
            var bm = this.itempid;
            //  缺一个部门的参数
            this.showMessage1(bm);

            // 不现实主页列表和部门列表
            this.shifouxianshizhuye = false;
            this.shifouxianshibumen = false;
            this.shifouxianshirenyuan = true;
          }
        })
        .catch(e => {
          console.log(e);
          this.$message.success("查询失败");
        });
    },
    findList() {
      // 首次默认请求 界面
      var resdata = {
        // cid: this.pm.cid,
        page: this.page,
        pageSize: this.pageSize
        // token: getToken()
      };
      request(`/item/selectItemOptSum`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
          token: getToken()
        },
        params: resdata
      })
        .then(res => {
          if (res.status == 200) {
            console.log("查询改成同一个接口了  成功");
            console.log(res);
            this.total = res.data.total;
            console.log("查询改成同一个接口了  total");
            console.log(this.total);
            this.liebiao = res.data.object;
            //   this.total = res.data
            console.log("查询改成同一个接口了  列表");
            console.log(this.liebiao);
          }
        })
        .catch(e => {
          console.log(e);
          this.$message.success("查询失败");
        });
    },
    // // 编辑的操作
    // handleEdit(index, row) {
    //   console.log(index, row);
    // },
    // 删除的操作
    handleDelete(index, row) {
      console.log(index, row);
      // var id = row.id;
      // console.log(row);
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("奥利给 !!  马上进行删除接口");
          request(`/item/del/${row.id}`, {
            method: "get",
            headers: {
              "Content-Type": "application/json",
              token: getToken()
            }
          })
            .then(res => {
              console.log(
                "奥利给 分公司获取接口查询成功  下面的 是分公司的接口返回数据"
              );
              console.log(res);
              console.log(res.data.object);

              this.options = res.data.object;
              //   this.total = res.data
              // console.log(res.data.object[0]);
            })
            .catch(e => {
              console.log(e);
              this.$message.success("查询失败");
            });

          // 上面实request接口
          // axios
          //   .get("http://47.102.125.229:8888/item/del/" + row.id, {
          //     headers: {
          //       "Content-Type": "application/json",
          //       token: getToken()
          //     }
          //   })
          //   .then(function(ret) {
          //     // 注意data属性是固定的用法，用于获取后台的实际数据
          //     // console.log(ret.data)
          //     console.log(ret);
          //   });
          console.log("奥利给 !!  已经成功调用删除接口");
          this.findList();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.findList();
      console.log(pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findList();
    },
    // 编辑删除的操作

    // 多级联动下拉方法
    fenggongsi() {
      // 总部级别 下拉显示分公司接口
      request(`/branch/selectdown`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
          token: getToken()
        }
      })
        .then(res => {
          console.log(
            "奥利给 分公司获取接口查询成功  下面的 是分公司的接口返回数据"
          );
          console.log(res);
          console.log(res.data.object);

          this.options = res.data.object;
          //   this.total = res.data
          // console.log(res.data.object[0]);
        })
        .catch(e => {
          console.log(e);
          this.$message.success("查询失败");
        });
    },
    //点击分公司列表后  进行部门接口请求
    showMessage(res) {
      console.log(res);
      this.value1 = res;
      this.value2 = "";
      this.value3 = "";
      this.sanji2 = true;
      console.log(this.value1);
      // this.shouyedayin = 1;

      var bumen = {
        bid: this.value1,
        token: getToken()
      };
      // 获得选中的下拉框
      request(`department/selectComboBox`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: bumen
      })
        .then(res => {
          console.log("奥利给 已知分公司获取接口查询成功  下面的 部门返回数据");
          console.log(res);
          console.log(res.data.object);

          this.optionsbumen = res.data.object;
          this.sanji1 = false;
        })
        .catch(e => {
          console.log(e);
          this.$message.success("查询失败");
        });
    },
    // 点击部门选择框后  进行 人员列表接口请求
    showMessage1(res) {
      console.log("奥利给 人员选择框");

      // this.shouyedayin = 2;
      // console.log( this.shouyedayin);

      console.log(res);
      this.value2 = res;
      this.value3 = "";
      this.sanji2 = false;
      // console.log(this.value2);

      // this.bumendayin = true;
      // this.renyuandayin = false;

      // 每次点击部门列表，默认手动设置 true
      this.isbumen = true;

      var renyuan = {
        pid: this.value2,
        // total: this.total,
        // 徐宁待修改
        page: this.page,
        pageSize: this.pageSize
      };
      // 获得选中的下拉框
      request(`person/selectComboBox`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: renyuan
      })
        .then(res => {
          console.log("奥利给 已知分公司获取接口查询成功  下面的 人员数据");
          console.log(res);
          console.log(res.data.object);
          this.optionsrenyuan = res.data.object;
          this.sanji2 = false;
          //   this.total = res.data
          // console.log(res.data.object[0]);
        })
        .catch(e => {
          console.log(e);
          this.$message.success("查询失败");
        });
    },
    // 选择人员列表接口后
    showMessage2(res) {
      console.log("奥利给 选择人员列表后 获得人员的数据");
      console.log(res);
      this.value3 = res;
      console.log(this.value3);
      this.isbumen = false;

      // this.shouyedayin = 3;
      // console.log( this.shouyedayin);

      // this.bumendayin = false;
      // this.renyuandayin = true;
    },
    searchbutton() {
      // 如果没有 人员信息
      var that = this;
      if (that.isbumen) {
        // /department/find/{id}
        var bumenid = {
          pid: this.value2
        };
        request(`/item/selectItemOptSum`, {
          method: "get",
          headers: {
            "Content-Type": "application/json"
            // token: getToken()
          },
          params: bumenid
        })
          .then(res => {
            console.log("奥利给  点击部门搜索接口的数据");
            console.log(res);
            console.log(res.data.object);

            //  徐宁部门操作的接口数据;
            if (res.data.code == 1) {
              that.tablebumen = res.data.object;
              that.shifouxianshizhuye = false;
              that.shifouxianshibumen = true;
              that.shifouxianshirenyuan = false;
              that.shouyedayin = 2;
              console.log(" 点击部门  this.shouyedayin");
              console.log(that.shouyedayin);
            }

            // this.sanji1 = false;
            //   this.total = res.data
            console.log(this.tablebumen);
          })
          .catch(e => {
            console.log(e);
            this.$message.success("查询失败");
          });
      } else {
        // 点击 人员列表后的搜索 就以人员为准了
        var renyuanid = {
          principal: this.value3
        };
        // var renyuanid :{this.value3}
        console.log("奥利给  aaaa");
        request(`/item/selectItemOptSum`, {
          method: "get",
          headers: {
            "Content-Type": "application/json"
          },
          params: renyuanid
          // 错误 不是pid  要制定给我一个人员id
        })
          .then(res => {
            console.log("奥利给  人员搜索的接口返回数据");
            console.log(res);
            console.log(res.data.object);
            if (res.data.code == 1) {
              this.tablerenyuan = res.data.object;
              this.shifouxianshizhuye = false;
              this.shifouxianshibumen = false;
              this.shifouxianshirenyuan = true;
              this.shouyedayin = 3;
              console.log(" 点击部门  this.shouyedayin");
              console.log(this.shouyedayin);
            }
            //   徐宁人员操作的接口数据;

            // this.sanji1 = false;
            //   this.total = res.data
            // console.log(res.data.object[0]);
          })
          .catch(e => {
            console.log(e);
            this.$message.success("查询失败");
          });
      }

      // 已经获得人员的列表内容  现在后代去个搜索接口 以下需要修改
      // request(`person/selectComboBox`, {
      //   method: "get",
      //   headers: {
      //     "Content-Type": "application/json"
      //   },
      //   params: renyuan
      // })
      //   .then(res => {
      //     console.log("奥利给 已知分公司获取接口查询成功  下面的 人员数据");
      //     console.log(res);
      //     console.log(res.data.object);
      //     this.optionsrenyuan = res.data.object;
      //     this.sanji1 = false;
      //   })
      //   .catch(e => {
      //     console.log(e);
      //     this.$message.success("查询失败");
      //   });
    }
  }
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-alert__content {
  width: 100%;
}
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
/* .el-alert__content {
  width: 50%;
} */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.el-alert__content {
  width: 100%;
}
</style>
